<template>
  <div class="bigbox">
    <div class="box">
      <div class="topbox">
        <div class="top" style="width: 100%;;padding: 15px;">

          <div style="height: 150px;width: 25%;">
            <el-card shadow="hover">
              <!-- <div slot="header" class="header">
								<span >总成交</span>
							</div> -->
              <div>
                <span>总领用</span>
              </div>
              <div class="content">
                <div style="display: flex;flex-direction: row;">
                  <div style="width: 80%;">
                    <p><span style="font-size: 30px;font-weight: 600;">{{EntryAndOut.borrownums}}</span></p>
                  </div>
                  <div><i><img width="70" height="70" src="@/assets/xiaoshou.png" /> </i></div>
                </div>
                <!-- <div> 自上月以来 <i></i><span style="color: green;" v-if="EntryAndOut.cgrkzzisZ==1">{{EntryAndOut.cgrkzz}}</span> <span style="color: red;" v-if="EntryAndOut.cgrkzzisZ==0">{{EntryAndOut.cgrkzz}}</span></div> -->
              </div>
            </el-card>
          </div>

          <div style="height: 150px;width: 25%;">
            <el-card shadow="hover">
              <!-- <div slot="header" class="header">
								<span >总成交</span>
							</div> -->
              <div>
                <span>今日领用</span>
              </div>
              <div class="content">
                <div style="display: flex;flex-direction: row;">
                  <div style="width: 80%;">
                    <p><span style="font-size: 30px;font-weight: 600;">{{EntryAndOut.dayborrownums}}</span></p>
                  </div>
                  <div><i><img width="70" height="70" src="@/assets/xiaoshou.png" /> </i></div>
                </div>
                <!-- <div> 自上月以来 <i></i><span style="color: green;" v-if="EntryAndOut.cgrkzzisZ==1">{{EntryAndOut.cgrkzz}}</span> <span style="color: red;" v-if="EntryAndOut.cgrkzzisZ==0">{{EntryAndOut.cgrkzz}}</span></div> -->
              </div>
            </el-card>
          </div>




          <div style="height: 150px;width: 25%;">
            <el-card shadow="hover">

              <div>
                <span>总库存</span>
              </div>
              <div class="content">
                <div style="display: flex;flex-direction: row;">
                  <div style="width: 80%;">
                    <p><span style="font-size: 30px;font-weight: 600;">{{EntryAndOut.itemNum}}</span></p>
                  </div>
                  <div><i><img width="70" height="70" src="@/assets/caigou.png" /> </i></div>
                </div>
              </div>
            </el-card>
          </div>
          <div style="height: 150px;width: 25%;">
            <el-card shadow="hover">
              <!-- <div slot="header" class="header">
								<span >总成交</span>
							</div> -->
              <div>
                <span>今日归还</span>
              </div>
              <div class="content">
                <div style="display: flex;flex-direction: row;">
                  <div style="width: 80%;">
                    <p><span style="font-size: 30px;font-weight: 600;">{{EntryAndOut.dayreturnnums}}</span></p>
                  </div>
                  <div><i><img width="70" height="70" src="@/assets/tuihuo.png" /> </i></div>
                </div>
                <!-- <div> 自上月以来 <i></i><span style="color: green;" v-if="EntryAndOut.xsckzzisZ==1">{{EntryAndOut.xsckzz}}</span><span style="color: red;" v-if="EntryAndOut.xsckzzisZ==0">{{EntryAndOut.xsckzz}}</span></div> -->
              </div>
            </el-card>
          </div>
          <div style="height: 150px;width: 25%;">
            <el-card shadow="hover">
              <!-- <div slot="header" class="header">
								<span >总成交</span>
							</div> -->
              <div>
                <span>总归还</span>
              </div>
              <div class="content">
                <div style="display: flex;flex-direction: row;">
                  <div style="width: 80%;">
                    <p><span style="font-size: 30px;font-weight: 600;">{{EntryAndOut.returnnums}}</span></p>
                  </div>
                  <div><i><img width="70" height="70" src="@/assets/tuihuo.png" /> </i></div>
                </div>
                <!-- <div> 自上月以来 <i></i><span style="color: green;" v-if="EntryAndOut.xsckzzisZ==1">{{EntryAndOut.xsckzz}}</span><span style="color: red;" v-if="EntryAndOut.xsckzzisZ==0">{{EntryAndOut.xsckzz}}</span></div> -->
              </div>
            </el-card>
          </div>
        </div>


      </div>
      <div class="centerbox">
        <div class="centertop">
          <el-tabs v-model="activeName">
            <el-tab-pane label="消费统计" name="first">每人每月消费统计</el-tab-pane>
            <!-- <el-tab-pane label="访问量" name="second">访问量</el-tab-pane> -->
          </el-tabs>
        </div>

        <div class="center">
          <div class="leftbox">
            <el-table :data="MoneyList">
              <el-table-column label="消费月份" align="center" prop="months" />
              <el-table-column label="人员名称" align="center" prop="employeeName" />
              <el-table-column label="人员编码" align="center" prop="employeeRfidCode"/>
              <el-table-column label="总消费" align="center" prop="totalMoney" />
            </el-table>
          </div>

          <div class="rightbox">
						<div class="rightcenter">
							<div class="righttitle" ref="aske">所有人每月总消费统计</div>
              <dv-scroll-board :config="config"  style="color: white"/>
      </div>
    </div>

          <div class="rightbox">
            <div class="rightcenter">
              <div class="righttitle" ref="aske">所有人每月总充值统计</div>
              <dv-scroll-board :config="configChongZhi"  style="color: white"/>
            </div>
          </div>


  </div>
  </div>
  </div>
  </div>
</template>

<script>
  // import SendOrdersLiss from '../cable/SendOrdersLiss';
// import { listHmzItem } from "@/api/system/HmzItem";
import { getHomeData } from "@/api/login";
  import {listMonety} from "@/api/system/HmzMoneyInfo";
  export default {
    // components: {
    // 	SendOrdersLiss
    // },
    data() {
      return {
        activeName: "first",
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 30,
        },
        inventoryList: [],
        MoneyList: [],
        NoPepoMoney:[],
        EntryAndOut: {},
        config:{
          data:[],
          header: ['消费月份', '消费总额'],
          // index: true,
          // columnWidth: [50],
          // align: ['center'],
          // carousel: 'page',
          headerBGC:"#909399",
          oddRowBGC:"#c8c9cc",
          evenRowBGC:"#82848a"
        },

        configChongZhi:{
          data:[],
          header: ['充值月份', '充值总额'],
          // index: true,
          // columnWidth: [50],
          // align: ['center'],
          // carousel: 'page',
          headerBGC:"#909399",
          oddRowBGC:"#c8c9cc",
          evenRowBGC:"#82848a"
        },
        ChongZhiMoney:null
      }
    },
    created: function() {
      // this.getList();
      // this.getWareHouseList();
      this.getEntryAndOut();
    //   统计消费金额
      this.MoneyCount();
    },
    methods: {
      /** 查询库存列表 */
      // getList() {
      //   listHmzItem(this.queryParams).then(response => {
      //     this.inventoryList = response.rows;
      //     this.total = response.total;
      //   });
      // },

      /** 查询出入库数据 */
      getEntryAndOut() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
        const day = currentDate.getDate();
        const Day = year + "-" + month + "-" + day;
        console.log(Day)
        getHomeData(Day).then(response => {
          this.EntryAndOut = response.data;
        });
      },
//   统计消费金额
      MoneyCount(){
        listMonety().then(response => {
          console.log("消费统计",response)
          // 每人消费总计
          this.MoneyList = response.data.hmzMoneyInfos1;
        //   全部人消费总计
          this.NoPepoMoney = response.data.listNoEmployee;
          // 充值总额
          this.ChongZhiMoney = response.data.hmzMoneyInfos2;
          var Listnew = [];
          this.NoPepoMoney.forEach(function (item) {
            var List = [];
            List[0] = item.months;
            List[1] = item.totalMoney;
            Listnew.push(List);
          })
          console.log("轮播数据3",Listnew)
          this.config = {
            data:Listnew,
            header: ['消费月份', '消费总额'],
            headerBGC:"#909399",
            oddRowBGC:"#c8c9cc",
            evenRowBGC:"#82848a" }

        //   构造充值数据
          var ListnewChongZhi = [];
          this.ChongZhiMoney.forEach(function (item) {
            var List = [];
            List[0] = item.months;
            List[1] = item.totalMoney;
            ListnewChongZhi.push(List);
          })
          this.configChongZhi = {
            data:ListnewChongZhi,
            header: ['充值月份', '充值总额'],
            headerBGC:"#909399",
            oddRowBGC:"#c8c9cc",
            evenRowBGC:"#82848a" }

        });


     }
    },
  }
</script>

<style>
  .bigbox {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
  }

  .box {
    width: 100%;
    height: 100%;
  }

  .topbox {
    /* height: 300px; */
    width: 100%;
    padding-right: 15px;
  }

  .top {
    margin-left: 8px;
    display: flex;
    justify-content: space-between;
    height: 100%;
  }

  .w100 {
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    margin: 5px;
    flex: 1;
  }

  .centerbox {
    height: 100%;
    margin: 20px 5px 0 13px;
    background-color: #fff;
    border-radius: 20px;
  }

  .center {
    height: 100%;
    display: flex;
  }

  .leftbox {
    flex: 2.7;
    width: 40%;
    padding: 15px;
    height: 100%;
  }

  .rightbox {
    flex: 1.5;
    width: 45%;
    margin-left: 30px;
  }


  .centertop {
    width: 100%;
    margin: 0px 10px;
    padding: 20px 20px 0 20px;
  }

  .left {
    width: 1300px;
    height: 100%;
  }

  .right {
    width: 451.34px;
    height: 100%;
  }

  .righttitle {
    color: rgba(0, 0, 0, .85);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .salecenter:nth-child(-n+3) span {
    background: #000;
    color: #fff;
  }

  .salecenter {
    display: flex;
    margin: 10px 0 17px 0;
  }

  .salecenter span {
    width: 20px;
    height: 20px;
    margin-top: 1.5px;
    margin-right: 30px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    background-color: #fafafa;
    border-radius: 20px;
  }

  .salename {
    flex: 0.55;
    color: rgba(0, 0, 0);
    font-size: 16px;
    line-height: 22px;
  }

  .salenum {
    flex: 0.3;
    color: rgba(0, 0, 0);
    font-size: 16px;
    line-height: 22px;
  }

  .salenum {
    overflow: auto;
  }

  .rightcenter {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 349px;
  }

  .ant-card-body {
    padding: 0 !important;
  }

  .calender {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0px !important;
  }

  .ant-card {
    background: none;
  }

  .table-page-search-wrapper .ant-form-inline .ant-form-item {
    margin: 0 !important;
    width: 140px !important;
    align-self: flex-end;
  }

  .ant-btn .ant-btn-primary {
    margin-left: 10px !important;
  }

  .table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control-wrappe {
    flex: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
</style>
